<template>
  <div class="container">
    <add-form v-if="panel == 'add'" @changePanel="setPanel"></add-form>
    <calc-main  v-if="panel == 'calc'" @changePanel="setPanel" ref="calcmian"></calc-main>
    <task-container v-if="panel == 'task'" @changePanel="setPanel"></task-container>
    <el-dialog :title="importDialogTitle" :visible.sync="importDialog" width="60%">
      <el-form
        :inline="true"
        size="mini"
        :model="formInline"
        class="demo-form-inline"
        style="display: flex; justify-content: space-between"
      >
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="formInline.createTime"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="formInline.type" placeholder="类型" clearable>
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模型名称">
          <el-input
            v-model="formInline.modelName"
            placeholder="模型名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            <img :src="require('@/assets/images/cha3.png')" alt="" srcset="" />
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="modelList"
        border
        stripe
        size="mini"
        @row-click="rowClick"
        show-overflow-tooltip
        highlight-current-row
      >
        <el-table-column label="选择" width="55" align="center">
          <template slot-scope="scope">
            <el-radio :label="scope.row.id" v-model="currModelId">
              {{ "" }}
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index" align="center" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="name" label="评估模型名称"> </el-table-column>
        <el-table-column prop="type" align="center" label="模型类型"> </el-table-column>
        <el-table-column prop="updateTime" align="center" label="暂存时间" width="150">
        </el-table-column>
        <el-table-column prop="createBy" label="创建人员"> </el-table-column>
        <el-table-column prop="polymerizationAlg" label="算法类型"> </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="modelTotle"
        :current-page="modelCurrPage"
        @current-change="changeModelPage"
        style="text-align: right"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="importDialog = false">取 消</el-button>
        <el-button
          size="mini"
          :disabled="!currModelId"
          type="primary"
          @click="commitImport"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getModelList,
  importModel,
  getPretreatmentList,
  modelCalc,
  getTreeData,
  exportTabel,
  importTabel,
  getDictList,
  getAlgsList,
  getHistoryList,
  tempEdit,
  saveResult, getTaskAdd,
} from "@/api/calc";
import G6Container from "@/components/G6Container/index";
import addForm from "./components/addForm";
import calcMain from "./components/calcMain";
import taskContainer from "./components/taskContainer";
const PING = "评估模型";
const CAO = "草稿箱模板";
const PINGTITLE = "选择评估模型";
const CAOTITLE = "选择草稿箱模板";

export default {
  name: "",
  components: { G6Container, addForm, calcMain, taskContainer },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      g6Tree: {
        id: "1",
        num: "1.000",
        label: "WL系统能力",
        size: [120, 50],
        children: [
          {
            id: "2",
            num: "0.250",
            label: "WL系统能力",
            size: [120, 50],
            children: [
              { id: "5", num: "0.250", label: "WL系统能力", size: [40, 140] },
              { id: "6", num: "0.250", label: "WL系统能力", size: [40, 140] },
              { id: "7", num: "0.251", label: "WL系统能力", size: [40, 140] },
            ],
          },
          {
            id: "3",
            num: "0.250",
            label: "WL系统能力",
            size: [120, 50],
            children: [
              { id: "8", num: "0.250", label: "WL系统能力", size: [40, 140] },
              { id: "9", num: "0.250", label: "WL系统能力", size: [40, 140] },
              { id: "10", num: "0.250", label: "WL系统能力", size: [40, 140] },
            ],
          },
          {
            id: "4",
            num: "0.250",
            label: "WL系统能力",
            size: [120, 50],
            children: [
              { id: "11", num: "0.250", label: "WL系统能力", size: [40, 140] },
              { id: "12", num: "0.250", label: "WL系统能力", size: [40, 140] },
              { id: "13", num: "0.250", label: "WL系统能力", size: [40, 140] },
            ],
          },
        ],
      },
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
        desc: "",
      },
      panel: "task",
      graphG6: null,
      methodsDialog: false,
      direction: "rtl",
      activities: [
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-document-copy",
        },
      ],
      drawer: false,
      linkForm: [],
      linkDialog: false,
      fileList: [],
      modelType: 1,
      modelList: [],
      modelCurrPage: 1,
      modelTotle: 0,
      formInline: {
        value1: "",
        region: "",
        user: "",
      },
      importType: PING,
      importDialog: false,
      importDialogTitle: "",
      cities: [],
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      chuliMethods: [],
      value: "",
      pCurrPage: 1,
      pTotal: 0,
      pretreatmentList: [
        {
          id: 1,
          indexOrder: "1",
          name: "Kd",
          renwudaima: "KD003",
          riqi: "2024.1.5",
          ren: "张某某",
          det: "",
          weihu: "",
        },
        {
          id: 2,
          indexOrder: "2",
          name: "Kd",
          renwudaima: "KD003",
          riqi: "2024.1.5",
          ren: "张某某",
          det: "",
          weihu: "",
          children: [
            {
              id: 21,
              name: "001",
              riqi: "2024.1.5",
              ren: "张某某",
              det: "",
              weihu: "",
            },
            {
              id: 22,
              name: "002",
              renwudaima: "KD003",
              riqi: "2024.1.5",
              ren: "张某某",
              det: "",
              weihu: "",
            },
          ],
        },
        {
          id: 3,
          indexOrder: "3",
          name: "Kd",
          renwudaima: "KD003",
          riqi: "2024.1.5",
          ren: "张某某",
          det: "",
          weihu: "",
        },
      ],
      input4: "",
      currModelId: 0, // 当前选中的模型id
      currModel: {}, // 当前选中的模型
      commitModel: {},
      someData:{},
    };
  },
  computed: {
    isSelectedModel: function () {
      return JSON.stringify(this.commitModel) !== "{}";
    },
  },
  created() {
    this.getDict("sys_data_source", "cities");
    // this.getDict("sys_data_methods", "chuliMethods");
    this.getAlgList();
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    setPanel(panel) {
      if(panel.name == 'calc' && panel.add){
        let params ={
          emId:panel.emid,
          statement:panel.formLabelAlign.statement,
          code:panel.formLabelAlign.code,
          content:panel.formLabelAlign.content,
          name:panel.formLabelAlign.rwname,
          status:0,
        }
        getTaskAdd(params).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.msg
            });
            //新增成功后跳转页面
            this.panel = panel.name;
            this.$nextTick(()=>{
              this.$refs.calcmian.queryAll(res.data)
            })
          }else{
            this.$message({
              type: 'error',
              message: '新增失败，请重试!'
            });
          }
        });
      }else if(panel.name == 'calc'&& !panel.add){
        this.panel = panel.name;
        this.$nextTick(()=>{
          this.$refs.calcmian.queryAll(panel.alreadyData)
        })
      }
      else{
        this.panel = panel.name;
      }
    },
    resultHistory() {
      getHistoryList().then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.activities = res.data.records;
        }
      });
      this.drawer = true;
    },
    tableSelectFun(val, id) {
      // let index = this.pretreatmentList.findIndex((item) => {
      //   return item.id === id;
      // });
      // let item = this.pretreatmentList[index];
      // item.originalValue = val;
      // this.$set(this.pretreatmentList, index, item);
      // console.log(this.pretreatmentList);
    },
    tableInputFun(val, id) {
      let index = this.pretreatmentList.findIndex((item) => {
        return item.id === id;
      });
      let item = this.pretreatmentList[index];
      item.normalizationAlgSet = val;

      this.$set(this.pretreatmentList, index, item);
      console.log(this.pretreatmentList);
    },
    formatTree(node) {
      if (!node) {
        return;
      }
      node.id = node.id.toString();
      node.num = node.weight.toString();
      node.label = node.name;
      node.children = node.childList;
      if (node.level <= 3) {
        node.size = [120, 50];
      } else {
        node.size = [40, 140];
      }
      if (node.children && node.children.length) {
        var i = 0;
        for (i = 0; i < node.children.length; i++) {
          this.formatTree(node.children[i]);
        }
      }
    },
    baocun() {
      saveResult({
        code: this.commitModel.code,
        name: this.commitModel.name,
        nodeList: this.pretreatmentList,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$modal.msgSuccess("保存成功");
        }
      });
    },
    zancun() {
      tempEdit({
        code: this.commitModel.code,
        name: this.commitModel.name,
        nodeList: this.pretreatmentList,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$modal.msgSuccess("暂存成功");
        }
      });
    },
    getAlgList() {
      this.chuliMethods = [
        {
          key: "YCL_ZZSSF",
          label: "正整数算法",
        },
        {
          key: "YCL_JSPJZSF",
          label: "计算平均值算法_wait",
        },
        {
          key: "YCL_ZSSSF",
          label: "正实数算法",
        },
        {
          key: "YCL_PDSiDJSF",
          label: "判断四等级算法",
        },
        {
          key: "YCL_PDSDJSF",
          label: "判断三等级算法",
        },
        {
          key: "YCL_PDSFSF",
          label: "判断是否算法",
        },
        {
          key: "YCL_FFSSSF",
          label: "非负实数算法",
        },
        {
          key: "YCL_FFZSSF",
          label: "非负整数算法",
        },
      ];
      // getAlgsList().then((res) => {
      //   if (res.code == 200) {
      //     this.chuliMethods = res.data;
      //   }
      // });
    },
    tagClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.inputValue = "";
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    chuliClick(val) {
      this.inputValue = val.key;
      if (this.inputVisible) {
        this.handleInputConfirm();
      }
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (this.dynamicTags.indexOf(inputValue) !== -1) {
        this.$modal.msgError("不能选择重复的步骤");
        this.inputValue = "";
      } else {
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = "";
      }
    },
    commitStep() {
      this.$set(this.settingRow, "dataPreprocessingAlg", this.dynamicTags.join(","));
      this.$modal.msgSuccess("本地数据已更新，保存后生效");
      this.methodsDialog = false;
    },
    getDict(dictType, key) {
      getDictList({
        pageNum: 1,
        pageSize: 20,
        dictType,
      }).then((res) => {
        if (res.code == 200) {
          this[key] = res.rows;
        }
      });
    },
    showlinkDialog() {
      this.linkDialog = true;
    },
    link() {
      this.linkDialog = false;
      console.log(this.linkForm);
    },
    uploadFile(a, b, c) {
      console.log(a, b, c);
      var formData = new FormData();
      formData.append("file", a.file);
      importTabel(formData).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("上传成功");
          this.searchP();
        }
        this.fileList = [];
      });
    },
    downTable(type) {
      exportTabel({ code: this.modelType, type: type.toString() }).then((res) => {
        const url = window.URL.createObjectURL(
          new Blob([res], { type: "application/xlsx" })
        );
        const link = document.createElement("a");
        link.href = url;
        link.download = "filename.xlsx";
        link.click();
      });
    },
    searchP() {
      this.pCurrPage = 1;
      this.getPretreatment();
    },
    changePPage() {
      this.getPretreatment();
    },
    changeModelPage() {
      this.getModel();
    },
    commitImport() {
      this.commitModel = this.currModel;
      importModel({ status: this.modelType, id: this.commitModel.id }).then((res) => {
        this.importDialog = false;
        this.$modal.msgSuccess("导入成功");
      });
      this.pCurrPage = 1;
      this.getPretreatment();
    },
    getPretreatment() {
      getPretreatmentList({
        code: this.modelType,
        pageNo: this.pCurrPage,
        pageSize: 10,
        name: this.input4,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          res.data.records.map((e) => {
            if (!e.dataPreprocessingAlg) {
              e.dataPreprocessingAlg = "";
            }
            return e;
          });
          this.pretreatmentList = res.data.records;
          this.pTotal = res.data.total;
        }
      });
    },
    calc() {
      if (
        !this.pretreatmentList.some((item) => {
          return item.normalizationAlgSet == "";
        })
      ) {
        tempEdit({
          code: this.commitModel.code,
          name: this.commitModel.name,
          nodeList: this.pretreatmentList,
        }).then((res) => {
          if (res.code == 200) {
            modelCalc({ code: this.modelType }).then((res) => {
              this.$modal.msgSuccess("计算完成");
              getTreeData({ code: this.modelType }).then((res) => {
                if (res.code == 200) {
                  this.formatTree(res.data);
                  console.log(res.data);
                }
              });
            });
          }
        });
      } else {
        this.$modal.msgWarning("请填写系统标准数据");
      }
    },
    view() {},
    deleteRow(row) {
      this.settingRow = row;
      this.methodsDialog = true;
    },
    rowClick(val) {
      this.currModelId = val.id;
      this.currModel = val;
    },
    onSubmit() {
      this.modelCurrPage = 1;
      this.getModel();
    },
    importByPing() {
      this.modelType = 1;
      this.modelCurrPage = 1;
      this.importDialogTitle = PINGTITLE;
      this.importType = PING;
      this.getModel();
    },
    importByCao() {
      this.modelType = 2;
      this.modelCurrPage = 1;
      this.importDialogTitle = CAOTITLE;
      this.importType = CAO;
      this.getModel();
    },
    getModel() {
      const params = {
        createTime: this.formInline.createTime,
        type: this.formInline.type,
        modelName: this.formInline.modelName,
        status: this.modelType,
        pageNo: this.modelCurrPage,
        pageSize: 10,
      };
      this.importDialog = true;
      getModelList(params).then((res) => {
        if (res.code == 200) {
          this.modelList = res.data.records;
          this.modelTotle = res.data.total;
        }
      });
    },
    handleSelectionChange() {},
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  ::v-deep .el-date-editor--daterange.el-input__inner {
    width: 250px;
  }
  ::v-deep .el-button span {
    display: flex;
    align-items: center;
    img {
      display: block;
      margin-right: 5px;
    }
  }
  .flexAlign {
    display: flex;
    align-items: center;
    img {
      display: block;
      margin-right: 5px;
    }
    span {
      display: flex;
      align-items: center;
    }
  }

  .calcMain {
    background-color: #fff;
    box-shadow: 0 0 10px 10px #ccc;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), #ffffff);
    box-shadow: 0px 4px 10px 0px rgba(0, 34, 64, 0.05);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
    border-radius: 5px;
    height: 100%;
    width: 100%;
    .topBtn {
      height: 50px;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e4e8f1;
      .line {
        width: 1px;
        height: 30px;
        margin: 0 20px;
        background: #e4e8f1;
        border-radius: 1px;
      }
      .pageTitle {
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #3771f5;
        line-height: 30px;
      }

      .pageTitle1 {
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #333;
        line-height: 30px;
      }
      .qing {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #878c98;
        line-height: 30px;
      }
      .xinjian {
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #3771f5;
        line-height: 30px;
      }
      .uploadDemo {
        margin-left: 10px;
      }
    }
    .bottomMain {
      padding: 10px;
      box-sizing: border-box;
      .title1,
      .title2 {
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #393b3c;
        line-height: 38px;
      }
      .addForm {
        width: 500px;
        margin: 50px auto;
      }
      .tableContainer {
        width: 100%;
        padding: 0 10px 10px;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #91b2cc;
        border-radius: 4px;
        .searchInput {
          margin-right: 10px;
        }
        .myTabel {
          margin: 0 0 10px;
          width: 100%;
          .tableLineInput {
            width: 100px;
          }
        }
      }
      .graph {
        width: 100%;
        height: 400px;
        border: 1px solid #91b2cc;
        border-radius: 4px;
      }
      .bottomBtn {
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .timeItem {
    height: 30px;
    width: 30px;
    position: absolute;
    left: -11px;
    top: 0;
  }
  .hisInfoItem {
    line-height: 30px;
    color: #5f6678;
    & > div:nth-child(1) {
      padding: 8px;
      line-height: 22px;
      box-sizing: border-box;
      width: 100%;
      background-color: #f0f4fc;
      border-radius: 4px;
      font-size: 18px;
      font-weight: 700;
    }
  }
}
</style>
